<template>
	<view class="container" style="background-color: #fff;">
		<scroll-view class="scroll-Y" scroll-y="true" @scroll="scroll">
			<view>
				<view :style="{background:vipStyle.background1}" class="user-section">
					<uni-nav-bar statusBar="true" fixed="true" :color="navColor" :background="navBg" :title="'ID:' + userInfo.uid">

					</uni-nav-bar>
					<image class="bg" src="/static/images/center/user-bg.png"></image>
					<view class="userInfoBox">
						<view class="checkout" v-if="userInfo.user_kind == 1" @tap="businessTo">
							<image class="checkout-img" src="../../static/images/center/checkout.png" mode=""></image>
							<text class="checkout-text">切换为商户</text>
						</view>
						<view class="user-info-box">
							<view class="portrait-box">
								<image class="portrait" :src="userInfo.avatar || '../../static/images/public/head_portrait.jpg'"></image>
							</view>
							<view class="info-box">
								<view class="info-box-box">
									<text class="username">{{userInfo.nickname || '普通会员'}}</text>
									<image class="info-box-img" :src="userInfo.vip_icon" mode=""></image>
								</view>

								<text class="phone" v-if="userInfo.phone">{{userInfo.phone}}</text>
							</view>
						</view>
						<view class="balance-box" @tap="navTo('/pages/center/balance/balance')">
							<text class="balance">{{userInfo.now_money || 0}}</text>
							<text class="name">当前余额</text>
						</view>
						<view class="vip-card-box"  @tap="goVip()">
							<view class="card-bg" :style="{background:vipStyle.background2}">
								<image class="huangguan" src="../../static/images/center/vipCard.png" mode=""></image>
								<view class="desc">
									<text class="a" v-if="userInfo.level == 0">成为会员，享受更多权益</text>
									<text class="a" v-else>{{userInfo.vip_name||''}}</text>
									<text class="b" v-if="userInfo.level">到期时间:{{userInfo.valid_time}}</text>
									<view class="b-btn" :style="{background:vipStyle.background3}">
										<text class="b-btn-text">查看详情</text>
										<text class="b-btn-text cell-more yticon icon-you"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="cover-container">
						<image class="arc" src="../../static/images/center/arc.png" mode=""></image>
						<view class="tj-sction">
							<view class="tj-item" v-for="(item,index) in userInfo.shellCount.list" :key="index" @tap="navTo('/pages/center/shell/shell?id=' + item.id+'&name='+ item.name)">
								<text class="num">{{item.count||0}}</text>
								<view class="shellName">
									<image class="shellName-img" :src="item.image" mode=""></image>
									<text class="shellName-text">{{item.name}}</text>
								</view>
							</view>
							<view class="tj-item" @tap="navTo('/pages/center/integral/integral')">
								<text class="num">{{userInfo.integral||0}}</text>
								<view class="shellName">
									<image class="shellName-img jifen" src="../../static/images/center/1qdwdqd.png" mode=""></image>
									<text class="shellName-text">积分</text>
								</view>
							</view>
						</view>
						<view class="cut"></view>
					</view>
				</view>

				<view class="cover-container" style="background-color: #fff;">
					<view class="share" v-if="userInfo.user_kind == 0" @tap="isPromoter()">
						<image class="share-img" :src="assisBackground" mode=""></image>
					</view>
					<!-- 列表 -->
					<view class="list_box">
						<view class="list-cell b-b" @tap="navTo('/pages/center/bill/bill')" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/1.png" mode=""></image>
								<text class="cell-tit">我的账单</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="navTo('/pages/center/ticket/ticket')" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/13.png" mode=""></image>
								<text class="cell-tit">我的卡券</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="navTo('/pages/center/groundPromot/groundPromot')" hover-class="cell-hover"
						 :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/7.png" mode=""></image>
								<text class="cell-tit">我的二维码</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="navTo('/pages/center/team/team')" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/2.png" mode=""></image>
								<text class="cell-tit">我的推广</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" v-if="userInfo.view_shell_limit >= 50" @tap="navTo('/pages/center/present/present')" hover-class="cell-hover"
						 :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/3.png" mode=""></image>
								<text class="cell-tit">赠送贝壳</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view v-if="sellerCheck == 1&&userInfo.user_kind == 0&&userInfo.is_promoter==0" class="list-cell b-b" @tap="goApply" hover-class="cell-hover"
						 :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/4.png" mode=""></image>
								<text class="cell-tit">商户入驻</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view v-if="sellerCheck == 2||sellerCheck == 4" class="list-cell b-b" @tap="goApply" hover-class="cell-hover"
						 :hover-stay-time="50">
							<view class="bot" v-show="sellerCheck == 4">审核失败</view>
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/4.png" mode=""></image>
								<text class="cell-tit">商户入驻</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="navTo('/pages/center/help/help')" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/5.png" mode=""></image>
								<text class="cell-tit">帮助</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="navTo('/pages/center/controlCap/controlCap')" hover-class="cell-hover"
						 :hover-stay-time="50" v-if="userInfo.user_kind == 4">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/6.png" mode=""></image>
								<text class="cell-tit">地推查询</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view v-if="userInfo.user_kind == 3 || userInfo.user_kind == 4" class="list-cell b-b" @tap="navTo('/pages/center/groundPromot/groundPromot?type='+userInfo.user_kind)"
						 hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/7.png" mode=""></image>
								<text v-if="userInfo.user_kind == 3" class="cell-tit">渠道商【管理】推广二维码</text>
								<text v-if="userInfo.user_kind == 4&&userInfo.real_name" class="cell-tit">渠道商【{{userInfo.real_name}}】推广二维码</text>
								<text v-if="userInfo.user_kind == 4&&!userInfo.real_name" class="cell-tit">渠道商【{{userInfo.nickname}}】推广二维码</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="navTo('/pages/index/announcement/announcement')" hover-class="cell-hover"
						 :hover-stay-time="50">
							<view class="bot" v-show="Number(bot) > 0">{{bot}}</view>
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/11.png" mode=""></image>
								<text class="cell-tit">公告</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="navTo('/pages/center/accountSet/accountSet')" hover-class="cell-hover"
						 :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/12.png" mode=""></image>
								<text class="cell-tit">设置</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="navTo('/pages/center/about/about')" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/8.png" mode=""></image>
								<text class="cell-tit">关于</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<!-- <view class="list-cell b-b" @tap="life" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../../static/images/center/icon/10.png" mode=""></image>
								<text class="cell-tit">生活缴费</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>
<script>
	import {
		seller_check
	} from "@/api/merchant.js"
	import {
		getUserInfo
	} from "@/api/user.js"
	import {
		systemConfig
	} from "@/api/public.js"
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				navColor: '#fff',
				navBg: "inherit",
				bot: "",
				act: 4,
				styleIdx: 0,
				vipStyle: {
					background1: "",
					background2: "",
					background3: "",
				},
				userInfo: { //app 得有
					shellCount: {
						list: []
					}
				},
				sellerCheck: 0, //检查用户身份
				assisBackground: "",
				msg: "",
				ruleId: 24,
				imagesArr: [
					'https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-08/c7be1202008101613564789.png', //成为小助手
					'https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-08/5b427202008101613529870.png' //我的小助手
				]
			}
		},
		methods: {
			getUserInfo() {
				getUserInfo().then(res => {
					res.data.shellCount.list.map((val, key) => {
						val.count = this.$api.deciml(val.count);
						return val
					});
					this.userInfo = res.data
					if (this.userInfo.is_promoter) {
						this.assisBackground = this.imagesArr[1]
					} else {
						this.assisBackground = this.imagesArr[0]
					}
					if (res.data.noticePrompt > 99) {
						this.bot = "99+"
					} else {
						this.bot = res.data.noticePrompt
					}
				
					uni.setStorageSync("userInfo", this.userInfo)
					if (this.userInfo.level == 0) {
						this.vipStyle.background1 = "linear-gradient(0deg, rgba(87, 190, 106, 1) 0%, rgba(143, 224, 158, 1) 100%)"
						this.vipStyle.background2 = "linear-gradient(90deg, rgba(36, 59, 85, 1) 0%, rgba(20, 30, 48, 1) 100%)"
						this.vipStyle.background3 = "#27467A"
					} else if (this.userInfo.level == 1) {
						this.vipStyle.background1 = "linear-gradient(0deg,rgba(189,195,199,1) 0%,rgba(44,62,80,1) 100%)"
						this.vipStyle.background2 = "linear-gradient(90deg,rgba(173,169,150,1) 0%,rgba(234,234,234,1) 100%)"
						this.vipStyle.background3 = "#999"
					} else if (this.userInfo.level == 2) {
						this.vipStyle.background1 = "linear-gradient(0deg,rgba(232,203,192,1) 0%,rgba(99,111,164,1) 100%)"
						this.vipStyle.background2 = "linear-gradient(90deg,rgba(246,215,214,1) 0%,rgba(164,166,201,1) 100%)"
						this.vipStyle.background3 = "#3f3f3f"
					}
					// else if (this.userInfo.level == 3) {
					// 	this.vipStyle.background1 = "linear-gradient(0deg,rgba(51,51,51,1) 0%,rgba(94,94,94,1) 100%);"
					// 	this.vipStyle.background2 = "linear-gradient(90deg,rgba(234,205,163,1) 0%,rgba(214,174,123,1) 100%);"
					// 	this.vipStyle.background3 = "#3f3f3f"
					// }
					seller_check().then(res => {
						this.sellerCheck = res.data.check;
						this.msg = res.data.msg
					})
				})
			},
			scroll(e) {
				this.navBg = "rgba(255,255,255," + e.detail.scrollTop / 150 + ')'
				if (e.detail.scrollTop > 10) {
					this.navColor = "rgba(0,0,0," + e.detail.scrollTop / 150 + ')'
				} else {
					this.navBg = "inherit"
					this.navColor = '#fff'
				}
			},
			goVip() {
				uni.navigateTo({
					url:"/pages/center/vip/vipRights"
				})
			},
			mobileLicense() {
				uni.navigateTo({
					url: "/pages/public/mobileLicense"
				})
			},
			isPromoter() {
				let url = this.userInfo.is_promoter ? `/pages/center/assistant/assistant` :
					`/pages/center/help/rulesDetail?type=${this.ruleId}`
				// let url = `/pages/center/assistant/assistant`
				uni.navigateTo({
					url: url
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			goApply() {
				let _this = this
				if (this.sellerCheck == 1) {
					uni.navigateTo({
						url: "/pages/center/storeApply/storeApply"
					})
					return
				} else if (this.sellerCheck == 2) {
					uni.navigateTo({
						url: "/pages/center/storeApply/storeApply?status=" + _this.sellerCheck
					})
					return
				} else if (this.sellerCheck == 4) {
					uni.navigateTo({
						url: "/pages/center/storeApply/applyFail?msg=" + this.msg
					})
					return
				} else if (this.sellerCheck == 5) {
					uni.showModal({
						content: "商户处于禁用状态",
						confirmText: "确定",
						showCancel: false
					})
					return
				}
			},
			//切换为商户
			businessTo() {
				// this.sellerCheck = 1
				let _this = this
				//1未提交商户入驻2商户入驻正在审核3商户入驻成功4商户入驻审核未通过
				if (this.sellerCheck == 1) {
					uni.showModal({
						content: "您还不是商户，是否入驻",
						confirmText: "去入驻",
						cancelText: "取消",
						confirmColor: "#57BE6A",
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/center/storeApply/storeApply"
								})
							}
						}
					})
					return
				} else if (this.sellerCheck == 2) {
					uni.showModal({
						content: "商户入驻正在审核，请耐心等待",
						confirmText: "确定",
						cancelText: "取消",
						confirmColor: "#57BE6A"
					})
					return
				} else if (this.sellerCheck == 3) {
					uni.navigateTo({
						url: '/business/business'
					})
				} else if (this.sellerCheck == 4) {
					uni.navigateTo({
						url: "/pages/center/storeApply/applyFail?msg=" + this.msg
					})
					return
				} else if (this.sellerCheck == 5) {
					uni.showModal({
						content: "商户处于禁用状态,请联系客服",
						confirmText: "确定",
						showCancel: false
					})
				}
			},
			life() {
				uni.showToast({
					icon: "none",
					title: "小普正在开发中，新功能即将上线"
				})
			}
		}
	}
</script>
<style lang='scss' scoped>
	.container {
		height: 100vh;
		padding-bottom: 50px;
		padding-bottom: calc(50px + env(safe-area-inset-bottom));
		box-sizing: border-box;

		.scroll-Y {
			height: 100%;
		}
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
	}

	.user-section {
		width: 750rpx;
		background: linear-gradient(0deg, rgba(87, 190, 106, 1) 0%, rgba(143, 224, 158, 1) 100%);

		.bg {
			position: absolute;
			left: 18rpx;
			top: 35rpx;
			width: 732rpx;
			height: 467rpx;
		}

		.userInfoBox {
			height: calc(575rpx - 100px);
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			z-index: 1;

			.checkout {
				position: absolute;
				top: 35rpx;
				right: 40rpx;
				width: 120rpx;
				height: 120rpx;
				background-color: rgba(255,255,255,.1);
				border-radius: 50%;
				
				z-index: 2;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.checkout-img {
					width: 50rpx;
					height: 50rpx;
				}

				.checkout-text {
					font-size: 16rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}

			.user-info-box {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 1;
				height: 70rpx;
				padding: 60rpx 26rpx 0;

				.portrait {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}

				.info-box {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding-left: 20rpx;

					.info-box-box {
						display: flex;
						align-items: center;

						.info-box-img {
							margin-left: 30rpx;
							width: 60rpx;
							height: 26rpx;
						}

						.username {
							font-size: 26rpx;
							font-weight: bold;
							color: rgba(255, 255, 255, 1);
							margin-bottom: 6rpx;
						}
					}


					.phone {
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}
				}
			}

			.balance-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.balance {
					text-align: center;
					min-width: 200rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 50rpx;
					font-weight: bold;
					color: rgba(255, 255, 255, 1);
				}

				.name {
					line-height: 30rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}

			.vip-card-box {
				width: 686rpx;
				height: 84rpx;
				position: relative;
				padding: 0 32rpx;
				margin-bottom: -30rpx;

				.card-bg {
					width: 686rpx;
					height: 84rpx;
					border-radius: 16rpx 16rpx 0 0;
					overflow: hidden;
					box-sizing: border-box;
					padding: 18rpx 34rpx;
					background: linear-gradient(90deg, rgba(36, 59, 85, 1) 0%, rgba(20, 30, 48, 1) 100%);
					position: relative;

					.huangguan {
						position: absolute;
						left: 4rpx;
						top: 4rpx;
						width: 122rpx;
						height: 112rpx;
						opacity: .15;
					}


					.desc {
						display: flex;
						justify-content: space-between;
						position: relative;
						align-items: center;
						z-index: 2;

						.a {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba(255, 255, 255, 1);
						}

						.b {
							font-size: 20rpx;
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
						}

						.b-btn {
							width: 142rpx;
							height: 34rpx;
							background: #27467A;
							border-radius: 17rpx;
							display: flex;
							justify-content: center;
							line-height: 34rpx;

							.b-btn-text {
								font-size: 20rpx;
								font-weight: 400;
								color: rgba(255, 255, 255, 1);
							}

							.cell-more {
								margin-left: 4rpx;
							}
						}
					}
				}
			}
		}
	}

	.cover-container {
		position: relative;
		z-index: 3;

		.arc {
			display: block;
			width: 750rpx;
			height: 30rpx;
		}

		.tj-sction {
			margin-top: -1px;
			@extend %section;

			.tj-item {
				@extend %flex-center;
				flex-direction: column;
				width: 25%;
				height: 120rpx;
				font-size: 24rpx;
				color: #75787d;
				text-align: center;
			}

			.num {
				min-width: 100rpx;
				min-height: 32rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 8rpx;
			}

			.shellName {
				min-width: 50rpx;
				min-height: 28rpx;
				display: flex;
				align-items: center;

				.shellName-img {
					width: 30rpx;
					height: 20rpx;
					margin-right: 6rpx;
				}
				.jifen{
					width: 27rpx;
					height: 26rpx;
				}

				.shellName-text {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.cut {
			width: 750rpx;
			height: 18rpx;
			background: rgba(238, 238, 238, 1);
		}

		.share {
			padding: 16rpx 30rpx;

			.share-img {
				width: 690rpx;
				height: 156rpx;
			}
		}

		.list_box {
			background-color: #fff;
			padding: 0 54rpx 20px;
			border-radius: 8rpx;

			.list-cell {
				font-size: 26rpx;
				position: relative;
				display: flex;
				justify-content: space-between;
				height: 83rpx;

				.bot {
					position: absolute;
					box-sizing: border-box;
					top: 26rpx;
					right: 50rpx;
					font-size: 20rpx;
					background-color: #F32626;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 15rpx;
					text-align: center;
					color: #fff;
					min-width: 30rpx;
					padding: 0 8rpx;
				}

				&.cell-hover {
					background: #fafafa;
				}

				.cell-left {
					display: flex;
					flex: 1;
					align-items: center;

					.cell-left-img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					.cell-tit {
						flex: 1;
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}
				}

				.cell-right {
					color: #E5E5E5;
					line-height: 83rpx;
				}
			}
		}
	}
</style>
